<template>
  <el-dialog v-model="drawer" title="新建工作圈" :append-to-body="true" width="660px" @close="close" custom-class="timelineForm">
    <el-alert style="margin-bottom:20px" title="图片、视频仅能发布其中一种" type="error" :closable="false" />
    <el-form :model="form" :rules="rules" ref="ruleRefForm" size="small" label-width="40px">
        <el-form-item label="图片" prop="images">
            <el-upload v-model:file-list="form.images" class="avatar-uploader" list-type="picture-card" ref="uploadAvatar" :action="actionUrl" :headers="headers" :auto-upload="true" :multiple="true" :limit="9" :on-success="imagesOnSuccess" :on-preview="handlePictureCardPreview" accept="image/*">
                <el-icon class="avatar-uploader-icon"><ele-Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="视频" prop="images">
            <el-upload class="avatar-uploader" ref="uploadVideo" :action="actionUrl" :headers="headers" :auto-upload="true" :multiple="false" :limit="1" :show-file-list="false" :on-success="imagesVideoOnSuccess" accept="video/*">
                <video v-if="form.videoUrl" :src="form.videoUrl" class="video-content"></video>
                <el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="内容" prop="desc">
            <el-input type="textarea" placeholder="请输入内容" v-model="form.desc" maxlength="140" :autosize="{minRows: 3}"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button type="default" size="small" @click="cancel(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
    <el-image-viewer @close="closeImgViewer" :url-list="[dialogImageUrl]" v-if="dialogVisible" />
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Session } from '/@/utils/storage'
export default {
    name: 'TimeLine',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    nextTick(() => {
                        ruleRefForm.value.resetFields()
                    })
                }
            }
        )
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const ruleRefForm = ref()
        const uploadAvatar = ref()
        const state = reactive({
            form: {
                images: [],
                videoUrl: '',
                desc: ''
            },
            rules: {},
            actionUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            dialogImageUrl: '',
            dialogVisible: false
        })
        // 图片上传
        const imagesOnSuccess = (res) => {
            const index = state.form.images.length - 1
            state.form.images[index].url = res.data.src
            state.form.videoUrl = ''
        }
        const handlePictureCardPreview = (uploadFile) => {
            state.dialogImageUrl = uploadFile.url
            state.dialogVisible = true
        }
        const closeImgViewer = () => {
            state.dialogVisible = false
        }
        // 视频上传
        const imagesVideoOnSuccess = (res) => {
            state.form.videoUrl = res.data.src
            state.form.images = []
        }
        // 提交
        const submitForm = async formEl => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    const form = state.form
                    if(form.images.length < 1 && !form.videoUrl && !form.desc) {
                        // 什么都没有
                        ElMessage.error('请输入发表的内容')
                        return
                    }
                    context.emit('onSubmit', state.form)
                    close()
                }
            })
        }
        // 取消
        const cancel = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        return {
            ...toRefs(state),
            drawer,
            close,
            ruleRefForm,
            uploadAvatar,
            imagesOnSuccess,
            handlePictureCardPreview,
            closeImgViewer,
            imagesVideoOnSuccess,
            submitForm,
            cancel
        }
    }
}
</script>

<style lang="scss">
.timelineForm{
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }
    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 66px;
        height: 66px;
        text-align: center;
    }
    .el-upload-list--picture-card .el-upload-list__item,
    .el-upload--picture-card{
        width: 66px;
        height: 66px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
        margin: 0 4px 4px 0;
    }
    .el-alert{
        padding: 4px 8px;
        border: none;
        margin-top: -10px;
    }
    .el-upload--picture-card{
        background: transparent;
    }
    .video-content{
        object-fit: contain;
        background: #000;
        width: 150px;
        height: 250px;
    }
}
</style>